$(function(){
    var $qqServer = $('.qqserver');
    var $qqserverFold = $('.qqserver_fold');
    var $qqserverUnfold = $('.qqserver_arrow');
    $qqserverFold.click(function(){
        $qqserverFold.hide();
        $qqServer.addClass('unfold');
    });
    $qqserverUnfold.click(function(){
        $qqServer.removeClass('unfold');
        $qqserverFold.show();
    });
    //窗体宽度小鱼1024像素时不显示客服QQ
    function resizeQQserver(){
        $qqServer[document.documentElement.clientWidth < 1024 ? 'hide':'show']();
    }
    $(window).bind("load resize",function(){
        resizeQQserver();
    });
});



// 匿名函数包裹，防止外界操作的修改
 
$(function () {
	// 还能输入的字得个数
	var able_count = 140;
	// 是否可以发布留言
	var release_able = false;
	// 右上角文字
	var $title_txt = $('.title-txt');
	// 留言框
	var $main_area = $('.main-area');
	// 发布按钮
	var $release_btn = $('.release-btn');
 
	// 输入框获取焦点
	$main_area.focus(function () {
		console.log("获取焦点");
		$(this).parent().addClass('outline');
		$title_txt.addClass('title');
		if (able_count >= 0) {
			$title_txt.html("还可以输入" + able_count + "个字");
		} else {
			$title_txt.html("你以超出" + (-able_count) + "个字");
		}
	})
 
	// 输入框失去焦点
	$main_area.blur(function () {
		console.log("失去焦点");
		$(this).parent().removeClass('outline');
		$title_txt.removeClass('title');
		$title_txt.html("快来买枪啦，走过路过不要错过！&nbsp;&nbsp;&nbsp;热门武器！");
	})
 
	// 输入框文本修改
	$main_area.on('input', function () {
		console.log("文本修改");
		// 剩余可输入的字个数
		able_count = 140 - $main_area.val().length;
		// console.log(able_count);
		// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
		if (able_count >= 0 && able_count <= 140) {
			$title_txt.html("还可以输入" + able_count + "个字");
			if (able_count != 140) {
				release_able = true;
			} else {
				release_able = false;
			}
		} else {
			$title_txt.html("你以超出" + (-able_count) + "个字");
			release_able = false;
		}
		// 根据发布状态决定发布按钮的样式
		if (release_able) {
			$release_btn.css({
				backgroundColor: "orange",
				borderColor: "orange"
			})
		} else {
			$release_btn.css({
				backgroundColor: "#ffc09f",
				borderColor: "#ffc09f"
			})
		}
 
	})
 
	// 发布事件
	$release_btn.click(function () {
		console.log("发布");
		if (release_able) {
			console.log('可以发布');
			// 创建show对象的各个部位
			var $showContent = $('<div class="show-content"></div>'),
			$showName = $('<div class="show-name"></div>'),
			$showTxt = $('<div class="show-txt"></div>'),
			$showTime = $('<div class="show-time"></div>'),
			$showClose = $('<div class="show-close"></div>'),
			$showP = $('<p class=""></p>');
 
			var date = new Date();
			// 设置，对象结构内内容
			$showName.text("游客");
			$showP.text($main_area.val());
			$showTime.text(date);
			$showClose.text("x");
			// 添加进入主结构
			$showTxt.append($showP);
			$showContent.append($showName);
			$showContent.append($showTxt);
			$showContent.append($showTime);
			$showContent.append($showClose);
 
			// 向所有匹配元素内部的开始处插入内容
			$('.show').prepend($showContent);
 
			// 添加动画
			// 位置从输入框处下移
			$showContent.css({
				top: '-150px'
			})
			$showContent.animate({
				top: 0
			}, 200)
 
			// 删除事件
			$showClose.click(function () {
				// 显示插入的索引位置
				// console.log($(this).parent().index());
				// console.log($showContent.index());
 
				
				// 删除操作为顺便
				// $showContent.remove();
 
				// 使用删除动画，创建效果
				$showContent.animate({
					height: 0
				}, 200, function () {
					// 动画结束后将自身从dom中移除
					$showContent.remove();
				})
				
 
			})
 
			// 发布成功后收尾工作
			$main_area.val(""); //输入框清空
			able_count = 140;  //输入框可输入内容数重置
			release_able = false; 
			$release_btn.css({
				backgroundColor: '#ffc09f',
				borderColor: '#ffc09f'
			})  //按钮点击事件重置
 
		}
	})
 
 
})







//界面加载完毕执行以下程序
$(function(){
    //定义i变量为动态控制图片轮播做准备，i的值与每张图片进行一一的对应
    var i=0;
    //时间变量，为自动轮播以及对光标的影响做出相应的反应
    var timer=null;
    //根据图片的张数动态添加圆点个数
    for (var j = 0; j < $('.img li').length; j++) {
        $('.num').append('<li></li>');
    }
    //默认情况下的第一个圆点进行背景设计
    $('.num li').first().addClass('active');
    //根据光标的影响控制按钮的显示和隐藏
    $('.imgBox').hover(function(){
        $('.btn').show();
    },function(){
        $('.btn').hide();
    });
    //将第一张图片复制并添加到img部分下与前两张图片相接
    var firstimg=$('.img li').first().clone(); //复制第一张图片
    $('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
    //定时器自动轮播
    timer=setInterval(function(){
        i++;
        if (i==$('.img li').length) {
            i=1;
            $('.img').css({left:0});//保证无缝轮播，设置left值
        }
        //进行下一张图片
        $('.img').stop().animate({left:-i*1550},430);
        //圆点跟着变化
        if (i==$('.img li').length-1) {
            $('.num li').eq(0).addClass('active').siblings().removeClass('active');
        }else{
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        }
    },1000);
    //鼠标移入，暂停自动播放，移出，开始自动播放
    $('.imgBox').hover(function(){
        clearInterval(timer);
    },function(){
        timer=setInterval(function(){
            i++;
            if (i==$('.img li').length) {
                i=1;
                $('.img').css({left:0});
            };
            //进行下一张图片
            $('.img').stop().animate({left:-i*1550},430);
            //圆点跟着变化
            if (i==$('.img li').length-1) {
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            }
        },1000)
    });
    //上一个按钮
    $('.prev').click(function(){
        i--;
        if (i==-1) {
            i=$('.img li').length-2;
            $('.img').css({left:-($('.img li').length-1)*1550});
        }
        $('.img').stop().animate({left:-i*1550},430);
        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
    });
    // 下一个按钮
    $('.next').click(function(){
        i++;
        if (i==$('.img li').length) {
            i=1; //这里不是i=0
            $('.img').css({left:0});
        };
        $('.img').stop().animate({left:-i*1550},430);
        if (i==$('.img li').length-1) { //设置小圆点指示
            $('.num li').eq(0).addClass('active').siblings().removeClass('active');
        }else{
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        };
 
    });
    //鼠标划入圆点
    $('.num li').mouseover(function(){
        var _index=$(this).index();
        //维持i变量控制的对应关系不变
        i = _index;                 
        $('.img').stop().animate({left:-_index*1550},430);
        $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
    });
 
})



// js实现菜单折叠
var flag=true; //开关按钮
function show_menu(){
	var menu1 = document.getElementById("menu1");
	if(flag){
		menu1.style.display="block";
		flag = false;
	}else{
		menu1.style.display="none";
		flag = true;
	}	
}

function show_menu1(){
	var menu1 = document.getElementById("menu1");
	menu1.style.display="none";
	flag = true; //鼠标离开时将flag默认回true
}

